<script>
    export default {
        props: {
            hrefNames:{
                type:Array, 
                required: true,  
                default: () => []
            }
        },
        methods: {
            sendHilightPageIndex(message) {
                this.$emit('hilight-page-index',message)
            }
        }
    }
</script>

<template>
    <div class="menu">
        <a href="#" v-for="(hrefName,index) in hrefNames" :key="index" @click="sendHilightPageIndex(index)">{{ hrefName }}</a>
    </div>
</template>

<style scoped>
    a {
        text-align: center;
        display: inline-block;
        width: 30%;
    }
</style>